<template>
  <a-card :bordered="false" :title="$route.meta.title" :bodyStyle="{ padding: '12px' }">
    <a-space slot="extra">
      <a-button v-auth:look @click="$refs.tree.show()">查看</a-button>
      <a-button v-auth:add type="primary" icon="plus" @click="$refs.form.create()">新建</a-button>
    </a-space>

    <a-table rowKey="id" size="middle" :loading="loading" :columns="columns" :dataSource="treeData" :pagination="pagination" defaultExpandAllRows>
      <!-- 菜单图标 -->
      <a-icon slot="icon" slot-scope="t" v-if="t" :type="t" />
      <!-- 状态 -->
      <template slot="status" slot-scope="t,r">
        <a-switch :defaultChecked="Boolean(t)" checkedChildren="启用" unCheckedChildren="停用" :disabled="authDisabled(t)" @change="onChange(r.id,$event)" />
      </template>
      <!-- 操作 -->
      <template slot="action" slot-scope="text,record">
        <!-- 置顶 -->
        <span v-auth:top>
          <a @click.stop="onTop(record)">
            <a-tooltip title="置顶">
              <a-icon type="vertical-align-top" />
            </a-tooltip>
          </a>
          <a-divider type="vertical" />
        </span>
        <!-- 详细 -->
        <span v-auth:detail>
          <a @click.stop="$refs.detail.show(record)">详情</a>
          <a-divider type="vertical" />
        </span>
        <!-- 更多 -->
        <a-dropdown v-if="$auth('edit') || $auth('del')">
          <a>更多</a>
          <a-menu slot="overlay" class="table-action">
            <a-menu-item v-auth:edit><a @click.stop="$refs.form.update(record)">修改</a></a-menu-item>
            <a-menu-item v-auth:del><a @click.stop="onDelete(record)" class="delete">删除</a></a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </a-table>
    <sjht-menu-form ref="form" :parent-menu="dataSource" @success="loadData" />
    <sjht-menu-tree ref="tree" v-if="$auth('look')" />
    <sjht-menu-detail ref="detail" v-if="$auth('detail')" />
  </a-card>
</template>
<script>
import { table } from '@/utils/mixins'
import { listToTree } from '@/utils/common'
import { PageMenuList, DeleteMenu, toTop, UpdateSelective } from '@/api/manage/menu'
import SjhtMenuForm from './modules/form'
import SjhtMenuTree from './tree'
import SjhtMenuDetail from './modules/detail'
export default {
  name: 'MenuList', //菜单管理
  mixins: [table],
  components: {
    [SjhtMenuForm.name]: SjhtMenuForm,
    [SjhtMenuTree.name]: SjhtMenuTree,
    [SjhtMenuDetail.name]: SjhtMenuDetail
  },
  data() {
    return {
      pagination: false,
      columns: [
        { title: '菜单名称', dataIndex: 'title', width: 200 },
        { title: '路由名称', dataIndex: 'name', width: 200 },
        { title: '菜单图标', dataIndex: 'icon', width: 75, align: 'center', scopedSlots: { customRender: 'icon' } },
        { title: '状态', dataIndex: 'status', width: 75, align: 'center', scopedSlots: { customRender: 'status' } },
        { title: '菜单排序', dataIndex: 'sort', width: 75, align: 'center' },
        { title: '创建时间', dataIndex: 'created', width: 145 },
        { title: '操作', key: 'operation', width: 135, align: 'center', scopedSlots: { customRender: 'action' } }
      ]
    }
  },
  computed: {
    treeData: function () {
      return listToTree(this.dataSource)
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 状态是否可以操作
    authDisabled(t) {
      const r = Boolean(t)
      return (!r && !this.$auth('enable')) || (r && !this.$auth('disable'))
    },
    // 加载数据
    loadData() {
      this.loading = true
      PageMenuList()
        .then(res => {
          this.dataSource = res
        })
        .catch(err => {
          this.dataSource = []
          this.$message.error(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 删除
    onDelete(rec) {
      if (this.dataSource.some(x => x.pid == rec.id)) {
        this.$message.error(`请先删除【${rec.title}】所有下级菜单`)
        return false
      }
      this.$confirm({
        title: '确定删除菜单吗？',
        content: `删除【${rec.title}】菜单，请谨慎操作。`,
        okType: 'danger',
        onOk: () => {
          const { $message } = this
          this.loading = true
          return DeleteMenu({ id: rec.id })
            .then(() => {
              $message.success('删除成功')
              this.loadData()
            })
            .catch(err => {
              $message.error(err)
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    // 置顶
    onTop(rec) {
      const { $message } = this
      if (this.dataSource.length <= 1) {
        $message.error('只有一条数据无法置顶')
        return
      }
      this.loading = true
      toTop({ id: rec.id, pid: rec.pid })
        .then(res => {
          this.dataSource = res
          $message.success('置顶成功')
        })
        .catch(err => {
          $message.error(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 更改状态 启用/停用
    onChange(id, checked) {
      this.loading = true
      const { dataSource, $message } = this
      const data = checked ? 1 : 0
      UpdateSelective({ id, status: data })
        .then(res => {
          if (res) {
            const index = dataSource.findIndex(x => x.id === id)
            if (index > -1) {
              const record = dataSource[index]
              Object.assign(record, { status: data })
              dataSource.splice(index, 1, record)
            }
            $message.success('修改成功')
          } else $message.error('修改失败')
        })
        .catch(err => {
          $message.error(err)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>